<template>
    <div class="main-content">
        <div class="main-title"><img class="main-qy-logo" src="../../static/img/qiye-logo.png" alt="logo"><span class="">中国二十二冶集团公司</span></div>
       
        <!-- top -->
        <el-row :gutter="10" class="top">
            <el-col :lg="8" :xl="8">
                <el-col :span="12" style="padding-left:0;">
                    <div class="top-slide-left">
                        <span class="car-num">{{carNum}}</span>
                        <p class="car-num-text">车辆总数</p>
                        <ul class="zt-ul">
                            <li class="zt-li">
                                <span class="working-cont"><i class="iconfont icon-choose working"></i></span>
                                <p class="zt-text">工作中</p>
                                <p class="zt-num">10</p>
                            </li>
                            <li class="zt-li">
                                <span class="working-cont f"><i class="iconfont icon-choose free"></i></span>
                                <p class="zt-text">空闲中</p>
                                <p class="zt-num">10</p>
                            </li>
                            <li class="zt-li">
                                <span class="working-cont offline"><i class="iconfont icon-choose off"></i></span>
                                <p class="zt-text">已下线</p>
                                <p class="zt-num">10</p>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="12" style="padding-right:0;">
                    <div class="top-slide-right">
                        <div class="index-area">
                            <i class="iconfont icon-dizhi"></i>
                            <div>
                                <p class="changdi-num fontBigNum">12</p>
                                <p>场地总数</p>
                            </div>
                        </div>
                        <div class="index-driver">
                            <i class="iconfont icon-siji-o"></i>
                            <div>
                                <p class="siji-num fontBigNum">12</p>
                                <p>司机总数</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-col>
            <el-col :lg="16" :xl="16">
                <div class="index-art">
                    <p class="index-art-title">本月业务数据</p>
                    <ul class="index-art-ul">
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">25</span>
                            <span class="index-art-li-text">已接订单</span>
                            <i class="iconfont icon-dingdan"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">32</span>
                            <span class="index-art-li-text">即将进场</span>
                            <i class="iconfont icon-address1"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">14</span>
                            <span class="index-art-li-text">即将下线</span>
                            <i class="iconfont icon-dingdan"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">56</span>
                            <span class="index-art-li-text">转场运输</span>
                            <i class="iconfont icon-diaoche"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">13</span>
                            <span class="index-art-li-text">求租发布</span>
                            <i class="iconfont icon-biji"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">27</span>
                            <span class="index-art-li-text">转让发布</span>
                            <i class="iconfont icon-zhuanrang"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">22</span>
                            <span class="index-art-li-text">求购发布</span>
                            <i class="iconfont icon-wancheng"></i>
                        </li>
                        <li class="index-art-li">
                            <span class="fontBigNum dingdan">54</span>
                            <span class="index-art-li-text">出租发布</span>
                            <i class="iconfont icon-wodefabutiezi"></i>
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>

        <!-- bottom -->
        <el-row :gutter="10" class="top">
            <el-col :lg="8" :xl="8">
                <div class="bottom-slide">
                    <el-badge ref="wait" :value="12" class="item on">
                        待处理消息
                    </el-badge>
                    <el-badge ref="warn" :value="12" class="item">
                        预警消息
                    </el-badge>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      carNum: 35
    };
  },
  mounted(){
    //   待处理/预警消息切换
    $(".el-badge").click(function(){
        $(this).addClass("on").siblings().removeClass("on")
    })
  }
};
</script>

<style scoped>
.el-badge{
    color: #C1C1C1;
    font-size: 16px;
    cursor: pointer;
}
.el-badge.on{
    color: #474747;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.bottom-slide{
    width: 100%;
    background:rgba(255,255,255,1);
    border-radius:5px;
    box-shadow:0px 0px 10px 0px rgba(222,218,218,0.45);
    padding: 28px 20px;
    box-sizing: border-box;
}
.index-art-li-text{
    font-size: 15px;
    color: #C2BDBD;
    padding: 0 24px 0 10px;
}
.index-art-li .iconfont{
    font-size: 30px;
    color: #FEC501;
}
.dingdan{
    font-size: 32px;
    color: #585858;
}
.index-art-li{
    width: 25%;
    position: relative;
    padding: 10px 16px 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 40px 0 30px 0;
    float: left;
}
.index-art-li::before{
    content: "";
    width: 5px;
    height: 45px;
    background: #FEC501;
    border-radius:3px;
    position: absolute;
    left: 0;
    top: 0;
}
.index-art-ul{
    width: 100%;
}
.index-art{
    width: 100%;
    height: 293px;
    padding: 20px 24px;
    box-sizing: border-box;
    background: #fff;
    border-radius:5px;
    box-shadow:0px 0px 10px 0px rgba(222,218,218,0.45);
    float: left;
}
.index-art-title{
    width: 100%;
    font-size: 16px;
    color: #474747;
}
.changdi-num, .siji-num{
    color: #fff;
    font-size: 50px;
    position: relative;
}
.icon-dizhi, .icon-siji-o{
    font-size: 50px;
    color: #fff;
}
.index-driver{
    width: 100%;
    height: 140px;
    background: #FEC501;
    border-radius:5px;
    box-shadow:0px 0px 10px 0px rgba(222,218,218,0.45);
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
}
.index-area{
    width: 100%;
    height: 140px;
    background: #65C056;
    border-radius:5px;
    box-shadow:0px 0px 10px 0px rgba(222,218,218,0.45);
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
}
.top-slide-right{
    display: flex;
    height: 293px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.zt-num{
    color: #5D5D5D;
    font-size: 20px;
    font-family: SmallNum;
}
.zt-text{
    color: #CACACA;
    font-size: 16px;
    padding: 8px 0;
}
.working-cont{
    width: 24px;
    height: 24px;
    background:rgba(255,179,16,.5);
    border-radius: 50%;
    display: inline-block;
}
.working-cont.offline{
    background:rgba(148,148,148,.5);
}
.working-cont.f{
    background:rgba(68,204,75,.5);
}
.off{
    font-size: 12px;
    color: #949494;
}
.free{
    font-size: 12px;
    color: #2CB732;
}
.working{
    font-size: 12px;
    color: #FFB310;
}
.zt-ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
}
.top {
  width: 100%;
  margin-bottom: 20px;
}
.top-slide-left {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(222, 218, 218, 0.45);
  text-align: center;
  padding-bottom: 26px;
}
.car-num{
    font-family: BigNum;
    color: #615C5C;
    font-size: 60px;
    position: relative;
    margin: 30px 0 20px 0;
    display: inline-block;
}
.car-num::after{
    content: "辆";
    position: absolute;
    bottom: 14px;
    right: -26px;
    font-size: 16px;
    color: #676767;
}
.car-num-text{
    font-size: 16px;
    color: #676767;
}
</style>


